﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/LoginLayout.cshtml";
}



 <div id="login">
        <h1>
           Modulo Caja - Login
        </h1>
      
        @using (Html.BeginForm("LogOn", "Login", FormMethod.Post, new { name = "frmLogin", id = "frmLogin", @class = "well" }))         
       {      
        
        <div class="item">
            <div class="label">
                <label for="user">
                    Usuario :
                </label>
            </div>
            <input type="text" id="user" name="user" class="input-medium" value="cramirez" />
        </div>
        <div class="item">
            <div class="label">
                <label for="pass">
                    Password:
                </label>
            </div>
            <input type="password" id="pass" name="pass" class="input-medium" value="ceci" />
        </div>
           
             <br />
             
        <div class="item">
            @*<div class="label">*@
                <label for="cajaList">
                   Caja:
                </label>
           @* </div>*@
           @Html.DropDownList("cajaList", (SelectList)ViewBag.Cajas, new { style = "width: 120px;" })          
         
        </div>
            
             <br />
             <br />
             <br />
        <button type="submit" class="button aceptar">
          Ingresar
        </button>     
        
       }
        
    </div>

    <script type="text/javascript">

        $(document).on("ready", loadData);

        function loadData() {

            $.widget("ui.combobox", {
                _create: function () {
                    var input,
                        self = this,
                        select = this.element.hide(),
                        selected = select.children(":selected"),
                        value = selected.val() ? selected.text() : "",
                        wrapper = this.wrapper = $("<span>")
                            .addClass("ui-combobox")
                            .insertAfter(select);

                    input = $("<input>")
                        .appendTo(wrapper)
                        .val(value)
                        .addClass("ui-state-default ui-combobox-input")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: function (request, response) {
                                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                response(select.children("option").map(function () {
                                    var text = $(this).text();
                                    if (this.value && (!request.term || matcher.test(text)))
                                        return {
                                            label: text.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                        $.ui.autocomplete.escapeRegex(request.term) +
                                                        ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>"),
                                            value: text,
                                            option: this
                                        };
                                }));
                            },
                            select: function (event, ui) {
                                ui.item.option.selected = true;
                                self._trigger("selected", event, {
                                    item: ui.item.option
                                });
                                $(self.element[0]).change(); //ñapa para que coje según el select que se ha ejecutado
                            },
                            change: function (event, ui) {
                                if (!ui.item) {
                                    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                        valid = false;
                                    select.children("option").each(function () {
                                        if ($(this).text().match(matcher)) {
                                            this.selected = valid = true;
                                            return false;
                                        }
                                    });
                                    if (!valid) {
                                        // remove invalid value, as it didn't match anything
                                        $(this).val("");
                                        select.val("");
                                        input.data("autocomplete").term = "";
                                        return false;
                                    }
                                }
                            }
                        })
                        .addClass("ui-widget ui-widget-content ui-corner-left");
                    var yo = this.element.attr('id');
                    input.data("autocomplete")._renderItem = function (ul, item) {
                        return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append("<a class='" + yo + "'>" + item.label + "</a>")
                            .appendTo(ul);
                    };

                    $("<a>")
                        .attr("tabIndex", -1)
                        .attr("title", "Show All Items")
                        .appendTo(wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                    /* .removeClass("ui-corner-all")*/
                        .addClass("ui-corner-right ui-combobox-toggle")
                        .click(function () {
                            // close if already visible
                            if (input.autocomplete("widget").is(":visible")) {
                                input.autocomplete("close");
                                return;
                            }

                            // work around a bug (likely same cause as #5265)
                            $(this).blur();

                            // pass empty string as value to search for, displaying all results
                            input.autocomplete("search", "");
                            input.focus();
                        });
                },

                destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                    $.Widget.prototype.destroy.call(this);
                }
            });

           // $("#cajaList").combobox();
           // $("#cajaList input.ui-autocomplete-input").css('width', '100px');
            $(".ui-combobox a.ui-button").css('height', '35px');

        };

     
    </script>